<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" href="../../component/pear/css/pear.css" />
	<link rel="stylesheet" href="../../admin/css/other/person.css" />
</head>
<body class="pear-container">
	<div class="layui-row layui-col-space10">
		<div class="layui-col-md3">
			<div class="layui-card">
				<div class="layui-card-body" style="padding: 25px;">
					<div class="text-center layui-text">
						<div class="user-info-head" id="userInfoHead">
							<img src="admin/images/avatar.jpg" id="userAvatar" width="115px" height="115px" alt="">
						</div>
						<h2 style="padding-top: 20px;font-size: 20px;">David</h2>
						<p style="padding-top: 8px;margin-top: 10px;font-size: 13.5px;">China ， 中国</p>
					</div>
				</div>
				<div style="height: 45px;border-top: 1px whitesmoke solid;text-align: center;line-height: 45px;font-size: 15px;">
					<span>知  而  不  争，随  遇  而  安</span>
				</div>
			</div>

			<div class="layui-card">
				<div class="layui-card-header">
					开 发 进 度
				</div>
				<div class="layui-card-body">
					<ul class="list">
						<li class="list-item"><span class="title">调整基本的页面布局</span><span class="footer">2021-04-1 08.35</span></li>
						<li class="list-item"><span class="title">新增消息组件</span><span class="footer">2021-04-1 14.45</span></li>
						<li class="list-item"><span class="title">移动端兼容</span><span class="footer">2021-04-1 18.44</span></li>
						<li class="list-item"><span class="title">系统布局优化</span><span class="footer">2021-04-2 09.54</span></li>
						<li class="list-item"><span class="title">数据库同步</span><span class="footer">2021-04-2 19.46</span></li>
						<li class="list-item"><span class="title">修改控制台界面</span><span class="footer">2021-04-3 21.49</span></li>
						<li class="list-item"><span class="title">增加个人资料布局</span><span class="footer">2021-04-4 09.43</span></li>
						<li class="list-item"><span class="title">扩展卡片样式</span><span class="footer">2021-04-5 21.47</span></li>
						<li class="list-item"><span class="title">拓展留言分页展示功能</span><span class="footer">2021-04-6 10.54</span></li>
						<li class="list-item"><span class="title">完善留言功能</span><span class="footer">2021-04-8 20.12</span></li>
					</ul>
				</div>
			</div>

			<div class="layui-card">
				<div class="layui-card-header">
					新 增 留 言
				</div>
				<div class="layui-card-body">
					<form class="layui-form" action="" onsubmit="return false">
						<div class="layui-form-item">
							<label class="layui-form-label">您的昵称</label>
							<div class="layui-input-block">
								<input type="text" name="title" required  lay-verify="required" placeholder="请输入您的昵称，不超过十字" autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item layui-form-text">
							<label class="layui-form-label">留言内容</label>
							<div class="layui-input-block">
								<textarea name="remark" placeholder="请输入您的留言，不超过三十字" class="layui-textarea"></textarea>
							</div>
						</div>

						<div class="layui-form-item">
							<div class="layui-input-block">
								<button type="button" class="layui-btn layui-btn-danger" id="uploadimage"><i class="layui-icon"></i>选择图片</button>
								<button class="layui-btn" lay-submit lay-filter="formDemo" id="uploadMessage">提交留言</button>
								<button type="reset" class="layui-btn layui-btn-primary" id="resetMessage">清除内容</button>
							</div>
						</div>

					</form>
				</div>
			</div>

		</div>

		<div class="layui-col-md9">
			<div class="layui-card">
				<div class="layui-card-header">
					留 言 板
				</div>
				<div class="layui-card-body" id="message">
					<!--这儿是留言板内容，下面代码用jquery填充-->


					<!--这儿是留言板内容，下面代码用jquery填充-->
				</div>
				<div id = "demo"></div>
			</div>
		</div>
	</div>
	<script src="../../component/layui/layui.js"></script>
	<script>

		// 这儿进行图片的上传
		layui.use(['upload', 'form'], function(){
			var upload = layui.upload;
			//执行实例
			upload.render({
				elem: '#uploadimage' //绑定元素
				,url: '/Admin/uploadImage' //上传接口
				,exts: 'jpg|png|jpeg' // 上传的类型
				,auto: false
				,bindAction: '#uploadMessage'
				,done: function(res){
					//上传完毕回调
				}
				,error: function(){
					//请求异常回调
				}
			});
		});

		// 这儿是ajax进行留言提交
		layui.use(['form'], function(){
			var form = layui.form;
			var $ = layui.jquery;
			form.on('submit(formDemo)', function(data){
				console.log(data);
				if(data.field.file === ""){
					layer.msg("请交出你的图片！", {
						icon: 2,
						time: 1000
					});
					return false;
				}
				$.ajax({
					url: "/Admin/addMessage",
					type: "post",
					contentType: "application/json",
					dataType: "json",
					data: JSON.stringify(data.field),
					success: function(result) {
						if (result.code === 0) {
							layer.msg(result.msg, {
								icon: 1,
								time: 1000
							}, function() {
								// 成功后执行回调，后续可能写页面的刷新
							});
						} else {
							layer.msg(result.msg, {
								icon: 2,
								time: 1000
							});
						}
						$('#resetMessage').click();
					}
				})
				return false;
			});
		});

		// 以下内容是对留言的分页展示
		window.onload = function(){
			var $ = layui.jquery;

			layui.use('laypage', function (){
				var laypage = layui.laypage;
				var $ = layui.jquery;
				var total = 0;
				$.ajax({
					url:"/Admin/getMessage?page=1&limit=99999",
					type: "get",
					dataType: 'json',
					async: false,
					success: function (res){
						total = res.count;
					}
				})
				laypage.render({
					elem: 'demo',
					count: total,
					limit: 6,
					layout: ['count', 'prev', 'page', 'next', 'skip'],
					theme: '#FF5722',
					jump: function(obj){
						var page = obj.curr
						var limit = obj.limit
						$.ajax({
							url: "/Admin/getMessage" + "?page=" + page + "&limit=" + limit,
							type: "get",
							dataType: 'json',
							async: false,
							success: function(res){
								console.log(res);
								var data = res.data
								var str = "<div class=\"layui-tab layui-tab-brief\" lay-filter=\"docDemoTabBrief\">" +
										"<div class=\"layui-tab-content\">" +
										"<div class=\"layui-tab-item layui-show\">";
								var begin1 = "<div class=\"layui-row layui-col-space10\" style=\"margin: 15px;\"><div class=\"layui-col-md1\"><img src=\""
								var begin3 = "\" style=\"width: 100%;height: 100%;border-radius: 5px;\"/>"
								var begin4 = "</div><div class=\"layui-col-md11\" style=\"height: 80px;\"><div class=\"title\"><font size=\"2\" face=\"verdana\">"
								var begin5 = "</font></div><br /><div class=\"content\"><font size=\"4\" face=\"verdana\">"
								var begin6 = "</font></div><div class=\"comment\">"
								var begin7 = "</div></div></div>"

								for(var i = 0; i < data.length; i ++){
									str += begin1;
									str += data[i].file;
									str += begin3;
									str += begin4;
									str += data[i].title;
									str += begin5;
									str += data[i].remark;
									str += begin6;
									str += data[i].time;
									str += begin7;
									str += begin7;
								}
								$('#message').html(str);
							}
						})
					}
				})
			})
		}

		layui.use(['jquery', 'element', 'layer'], function () {
			var element = layui.element,
				layer = layui.layer,
				$ = layui.jquery;

			let MODULE_PATH = "operate/";
			$("#userAvatar").attr("src", parent.layui.$(".layui-nav-img").attr("src"));

			window.callback = function (data) {
				layer.close(data.index);
                $("#userAvatar").attr("src", data.newAvatar);
                parent.layui.$(".layui-nav-img").attr("src", data.newAvatar);
            }

			$("#userAvatar").click(function () {
				layer.open({
					type: 2,
					title: '更换图片',
					shade: 0.1,
					area: ["900px", "500px"],
					content: MODULE_PATH + 'uploadProfile.html',
					btn: ['确定', '取消'],
					yes: function (index, layero) {
						window['layui-layer-iframe' + index].submitForm();
					}
				});
			});
		});
	</script>
</body>
</html>
